<d-tree #operableTree [tree]="tree" [treeNodeIdKey]="treeNodeIdKey" [treeNodeChildrenKey]="treeNodeChildrenKey"
          [treeNodesRef]="operableTreeNodeRef" [iconParentOpen]="iconParentOpen" [iconParentClose]="iconParentClose"
          [iconLeaf]="iconLeaf" [treeNodeTitleKey]="treeNodeTitleKey">
</d-tree>

<ng-template #operableTreeNodeRef let-treeNode="treeNode" let-treeFactory="treeFactory">
  <div class="tree-node operable-tree-node" [style.display]="treeNode.data.isHide ? 'none':''"
       [ngClass]="{selected: isSelectedNode(treeNode.data)}">
    <div class="tree-node__content" [class.tree-node--parent]="(treeNode.data.children || []).length > 0"
         (mouseenter)="treeNodeHover(treeNode, 'enter')" (mouseleave)="treeNodeHover(treeNode,'leave')">
      <div class="tree-node__content--value-wrapper" [class.isMatch]="treeNode.data.isMatch"
           [draggable]="draggable && treeNode.parentId != undefined" (dragstart)="onDragstart($event, treeNode)"
           (dragover)="onDragover($event)" (drop)="onDrop($event, treeNode)">
        <span (click)="toggleNode($event, treeNode)"
              *ngIf="(treeNode.data.children || []).length > 0 || treeNode.data.isParent" class="tree-node__folder">
          <span [ngStyle]="{display: iconParentClose && !treeNode.data.isOpen ? 'inline' : 'none'}" [innerHTML]="iconParentClose | safe: 'html'"></span>
          <span [ngStyle]="{display: iconParentOpen && treeNode.data.isOpen ? 'inline' : 'none'}" [innerHTML]="iconParentOpen | safe: 'html'"></span>
          <span [ngStyle]="{display: !iconParentOpen && !treeNode.data.isOpen ? 'inline' : 'none'}">
            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
              <g id="图标" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="fold">
                  <rect id="Rectangle-175" x="0" y="0" width="16" height="16" />
                  <path
                    d="M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z"
                    id="形状" fill="#293040" fill-rule="nonzero" />
                </g>
              </g>
            </svg>
          </span>
          <span [ngStyle]="{display: !iconParentOpen && treeNode.data.isOpen ? 'inline' : 'none'}">
            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
              <g id="图标" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="fold-copy-3">
                  <rect id="Rectangle-175" x="0" y="0" width="16" height="16" />
                  <path
                    d="M14,5 L14,4 L7.58578644,4 L5.58578644,2 L2,2 L2,5 L1,5 L1,1 L6,1 L8,3 L15,3 L15,5 L14,5 Z M1.28077641,7 L2.78077641,13 L13.2192236,13 L14.7192236,7 L1.28077641,7 Z M0,6 L16,6 L14,14 L2,14 L0,6 Z"
                    id="形状" fill="#293040" fill-rule="nonzero" />
                </g>
              </g>
            </svg>
          </span>
        </span>
        <span class="tree-node__leaf"
              *ngIf="(treeNode.data.children || []).length === 0 && !treeNode.data.isParent">
          <span *ngIf="!iconLeaf">
            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                 width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
              <g id="图标" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="文件">
                  <rect id="Rectangle-175" x="0" y="0" width="16" height="16" />
                  <path
                    d="M13,6 L9,6 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z"
                    id="形状" fill="#293040" fill-rule="nonzero" />
                </g>
              </g>
            </svg>
          </span>
          <span *ngIf="iconLeaf" [innerHTML]="iconLeaf | safe: 'html'"></span>
        </span>
        <ng-container *ngIf="iconTemplate && (iconTemplatePosition ==='before-checkbox')">
          <ng-template [ngTemplateOutlet]="iconTemplate" [ngTemplateOutletContext]="{ node: treeNode.data }">
          </ng-template>
        </ng-container>
        <d-checkbox *ngIf="checkable"
                      [(ngModel)]="treeNode.data.isChecked" (ngModelChange)="checkNodeById($event, treeNode.id)"
                      [halfchecked]="treeNode.data.halfChecked" [color]="checkboxInput?.color" [cssClass]="'tree-node__checkbox'"
                      [disabled]="treeNode.data.disabled">
        </d-checkbox>
        <ng-container *ngIf="iconTemplate && (!iconTemplatePosition || iconTemplatePosition ==='after-checkbox')">
          <ng-template [ngTemplateOutlet]="iconTemplate" [ngTemplateOutletContext]="{ node: treeNode.data }">
          </ng-template>
        </ng-container>
        <span *ngIf="!treeNode.data?.editable" (click)="selectNode($event, treeNode)" class="tree-node__title"
              [class.active]="treeNode.data.isActive" title="{{treeNode.data.title}}">{{treeNode.data.title}}</span>
        <span class="tree-node__edit" *ngIf="treeNode.data?.editable">
          <input [class.error]="!!treeNode.data.errTips" class="form-control input-sm" type="text" autofocus
                 [(ngModel)]="treeNode.data.title" (blur)="onBlurEdit(treeNode)" (keyup.enter)="onBlurEdit(treeNode)"
                 (input)="onInputChange($event.target.value, treeNode)" dPopover [content]="treeNode.data.errTips"
                 [position]="'top'" [appendToBody]="true" [visible]="!!treeNode.data.errTips" [popType]="'error'">
        </span>
        <ng-container *ngIf="statusTemplate">
          <ng-template [ngTemplateOutlet]="statusTemplate" [ngTemplateOutletContext]="{ node: treeNode }">
          </ng-template>
        </ng-container>
        <span dLoading [showLoading]="treeNode.data.loading" [loadingTemplateRef]="customizedLoadingRef">
        </span>
        <span class="icons"
              *ngIf='!treeNode.data.disableAdd && (treeNode.data.isActive || treeNode.data.isHover) && addable'
              (click)="addChildNode($event, treeNode)">
          <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="add-plus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g transform="translate(-531.000000, -168.000000)">
                <g transform="translate(529.000000, 166.000000)">
                  <path d="M7,7 L7,2 L9,2 L9,7 L14,7 L14,9 L9,9 L9,14 L7,14 L7,9 L2,9 L2,7 L7,7 Z" id="add-path"
                        fill="#293040"></path>
                </g>
              </g>
            </g>
          </svg>
        </span>
        <span class="icons"
              *ngIf='!treeNode.data.disableEdit && (treeNode.data.isActive || treeNode.data.isHover) && editable'
              (click)="editNode($event, treeNode)">
          <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="edit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g transform="translate(-652.000000, -1070.000000)">
                <g transform="translate(650.000000, 1068.000000)">
                  <path
                    d="M9.48528137,3.41421356 L10.8994949,2 L13.7279221,4.82842712 L12.3137085,6.24264069 L9.48528137,3.41421356 Z M5.24264069,13.3137085 L2.41421356,13.3137085 L2.41421356,10.4852814 L8.77817459,4.12132034 L11.6066017,6.94974747 L5.24264069,13.3137085 Z"
                    id="edit-path" fill="#293040"></path>
                </g>
              </g>
            </g>
          </svg>
        </span>
        <span class="icons "
              *ngIf='!treeNode.data.disableDelete && (treeNode.data.isActive || treeNode.data.isHover) && deletable'
              (click)="deleteNodes($event, treeNode)">
          <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g transform="translate(-1693.000000, -168.000000)" fill="#3C4458" fill-rule="nonzero" id="delete-path">
                <g transform="translate(1691.000000, 166.000000)">
                  <polygon id="Mask"
                           points="8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575">
                  </polygon>
                </g>
              </g>
            </g>
          </svg>
        </span>
        <ng-container *ngIf="operatorTemplate && (treeNode.data.isActive || treeNode.data.isHover)">
          <ng-template [ngTemplateOutlet]="operatorTemplate"
                       [ngTemplateOutletContext]="{$implicit: this, node: treeNode, addNode: addChildNodeProxy, editNode: editNodeProxy, deleteNode: deleteNodesProxy}">
          </ng-template>
        </ng-container>
      </div>
    </div>
    <div class="tree-node__children" *ngIf="treeNode.data.isOpen">
      <d-tree-nodes [treeList]="(treeNode.data.children || [])" [treeNodesRef]="operableTreeNodeRef"
                      [treeFactory]="treeFactory">
      </d-tree-nodes>
    </div>
  </div>
</ng-template>

<ng-template #customizedLoadingRef>
  <span class="loading-children"></span>
</ng-template>
